import { fileURLToPath, URL } from 'node:url';

import { defineConfig, loadEnv } from 'vite'
import vue from '@vitejs/plugin-vue';

import vueJsx from '@vitejs/plugin-vue-jsx';
import vueDevTools from 'vite-plugin-vue-devtools';
import AutoImport from 'unplugin-auto-import/vite'; // 导入 AutoImport 插件
import Components from 'unplugin-vue-components/vite'; // 导入 Components 插件
import { ElementPlusResolver, AntDesignVueResolver } from 'unplugin-vue-components/resolvers'; // 导入 Element Plus 和 Ant Design Vue 的自动解析器

// 按需导入图标
import IconsResolver from 'unplugin-icons/resolver';
import Icons from 'unplugin-icons/vite';

// https://vite.dev/config/
export default defineConfig((configEnv) => {
  const env = loadEnv(configEnv.mode, process.cwd());

  return {
    base: env.VITE_BASE_PATH,

    plugins: [
      vue(),
      vueJsx(),
      vueDevTools(),
      AutoImport({
        dts: './types/auto-imports.d.ts',  // 生成自动导入的类型定义文件
        imports: [
          'vue',  // 自动导入 vue 中的 API，比如 `reactive`, `ref`, `computed` 等
          'pinia',  // 自动导入 pinia 中的 API，例如 `defineStore`
          'vue-router',  // 自动导入 vue-router 中的 API
          '@vueuse/core',  // 自动导入 @vueuse/core 中的常用功能
          '@vueuse/math',  // 自动导入 @vueuse/math 中的数学相关功能
          {
            axios: [['default', 'axios']],  // 自动导入 axios
          },
          {
            from: 'vue-router',
            imports: ['RouteLocationRaw'],  // 只导入 `RouteLocationRaw` 类型
            type: true,  // 只导入类型
          },
        ],
        resolvers: [
          ElementPlusResolver({
            importStyle: 'sass',  // 使用 Sass 样式导入 Element Plus 组件
          }),
          AntDesignVueResolver({  // 自动导入 Ant Design Vue 组件
            importStyle: 'less',  // 使用 Less 样式导入 Ant Design Vue 组件
          }),
        ],
        defaultExportByFilename: false,
        vueTemplate: true,
      }),
      Components({
        dts: './types/components.d.ts',  // 生成组件类型定义文件
        include: [/\.vue$/, /\.vue\?vue/, /\.[tj]sx$/],
        resolvers: [
          ElementPlusResolver({
            importStyle: 'sass',  // 对 Element Plus 使用 Sass 样式进行按需导入
          }),
          AntDesignVueResolver({  // 对 Ant Design Vue 使用 Less 样式进行按需导入
            importStyle: 'less',
          }),
          IconsResolver({
            prefix: 'icon',
          }),
        ],
        dirs: ['src/components'],  // 扫描 `src/components` 目录中的所有组件
        deep: true,  // 深度扫描子目录，确保子目录中的组件也会被自动注册
      }),

      Icons({ compiler: 'vue3' }),
    ],

    resolve: {
      alias: {
        '@': fileURLToPath(new URL('./src', import.meta.url)),  // 设置路径别名
      },
    },

    css: {
      preprocessorOptions: {
        scss: {
          api: 'modern-compiler', // 使用推荐选项提高性能
          additionalData: `@use "@/styles/element/index.scss" as *;`, // 重写 Element Plus 样式变量
        },
      },
    },
  }
});
